<template>
  <el-upload
    class="avatar-uploader"
    action="/api/v1/upload/file"
    :show-file-list="false"
    list-type="picture-card"
    :on-progress="onProgress"
    v-bind="attrs"
    v-on="listeners"
  >
    <img
      v-if="path"
      :src="path"
      style="width: 100%;height: 100%; object-fit: cover;"
      alt="封面"
    >
    <template v-else>
      <svg-icon
        v-if="loadProgress === 0"
        icon-class="ruleDetails-default"
        class-name="upload-icon"
      />
      <div
        v-else
        class="uploading-icon"
      >
        <i class="el-icon-loading" style="color: #1890ff;" />
        <div style="color: #1890ff; margin-top: 15px;">{{ loadProgress }}%</div>
      </div>
    </template>
  </el-upload>
</template>
<script>
export default {
  name: '',
  props: {
    fileList: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      path: '',
      loadProgress: 0
    }
  },
  computed: {
    attrs() {
      return { ...this.$attrs }
    },
    listeners() {
      return { ...this.$listeners }
    }
  },
  watch: {
    fileList: {
      immediate: true,
      handler(n) {
        this.path = n
      }
    }
  },
  methods: {
    onProgress(e) {
      this.loadProgress = parseInt(e.percent)
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-icon {
  width: 80px;
  height: 80px;
}

.uploading-icon {
  width: 100%;
  height: 100%;
  background-color: rgba(#000, .6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
